<template>
  <div>
    <basic-dialog
      :visible.sync="dialogVisible"
      :handleClose="handleCloseDialog"
      :title="title"
      :show-footer="false"
      :width="'60%'"
      :handleOpened="handleOpened"
    >
      <div class="form-container">
        <el-form ref="queryData" :inline="true" :model="queryData" @submit.native.prevent>
          <el-form-item label="请选择要添加仓位的公司:" prop="bankName">
            <el-select v-model="queryData.companyId" filterable placeholder="请选择" @change="handleSelect">
              <el-option
                v-for="item in companyList"
                :key="item.companyId"
                :label="item.companyName"
                :value="item.companyId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div>已选择公司:</div>
        <div class="tag-list">
          <el-tag
            v-for="item in selectList"
            :key="item.companyId"
            closable
            @close="handleRemoveTag(item.companyId)"
          >
            {{item.companyName}}
          </el-tag>
        </div>
      </div>
      <el-row type="flex" justify="end">
        <el-button @click="handleCloseDialog">取消</el-button>
        <el-button type="primary" :disabled="this.selectList.length == 0" :loading="submitLoading" @click="handleSubmit">确定</el-button>
      </el-row>
    </basic-dialog>
  </div>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import {
  queryDeliveryCompanyListService,
  batchAddSkuCompanyService
} from '@/api/commodity/temporaryPurchasingGoods/temporaryPurchaseGoods';

export default {
  name: 'AddStorehouseDialog', // 添加仓位
  components: {
    BasicDialog,
  },
  props: {
    visible: { type: Boolean, default: false },
    title: { type: String, default: '添加仓位' },
    uuidList: { type: Array, default: () => [] },
  },
  data () {
    return {
      loading: false,
      submitLoading: false,
      queryData: {
        companyId: '',
      },
      selectList: [],
      companyList: [],
      uuids: []
    };
  },
  computed: {
    dialogVisible () {
      return this.visible;
    },
  },
  watch: {
    uuidList: {
      handler (newVal) {
        this.uuids = newVal
        console.log(this.uuids)
      },
      immediate: true
    }
  },
  methods: {
    handleOpened () {
      this.queryDeliveryCompanyList();
    },
    handleSelect (val) {
      const selectIds = this.selectList.map(item => item.companyId)
      if (!selectIds.includes(val)) {
        this.selectList.push(this.companyList.find(item => item.companyId == val))
      }
    },
    handleRemoveTag (val) {
      this.selectList = this.selectList.filter(item => item.companyId != val)
    },
    handleCloseDialog () {
      this.selectList = [];
      this.queryData.companyId = '';
      this.$emit('update:visible', false);
    },
    // 获取公司列表
    async queryDeliveryCompanyList () {
      const res = await queryDeliveryCompanyListService(
        {},
        state => { this.loading = state }
      );
      if (res?.retData) {
        this.companyList = res.retData;
      }
    },
    // 提交
    async handleSubmit () {
      const data = {
        uuids: this.uuids,
        companyIds: this.selectList.map(item => item.companyId),
      }
      const res = await batchAddSkuCompanyService(
        data,
        state => { this.submitLoading = state }
      );
      if (res) {
        this.$message.success('提交成功')
        this.$emit('getTableData')
        this.handleCloseDialog()
      }
    },
  }
};
</script>
<style lang="less" scoped>
.form-container {
  margin-bottom: 10px;
}
.title {
  margin-top: 25px;
}
.tag-list {
  margin-top: 10px;
  .el-tag {
    margin-right: 10px;
  }
}
</style>
